Android webview ajax

Question

I have wep application which some pages have to do ajax requests to get and update that pages without refresh the page.

My problem when I use android WebView to load that wep application. all pages that request ajax doesn't update the page which means the ajax requests don't work.

here is the code of MainActivity.java

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview_layout);
        webView = (WebView) findViewById(R.id.webView);
        webView.clearCache(true);
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                Log.d(LOG_TAG, message);
                new AlertDialog.Builder(view.getContext())
                        .setMessage(message).setCancelable(true).show();
                result.confirm();
                return true;
            }
        });
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                Toast.makeText(view.getContext(), "onPageStarted", Toast.LENGTH_SHORT).show();
                super.onPageStarted(view, url, favicon); //To change body of generated methods, choose Tools | Templates.
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                Toast.makeText(view.getContext(), "onPageFinished", Toast.LENGTH_SHORT).show();
                super.onPageFinished(view, url); //To change body of generated methods, choose Tools | Templates.
            }
        });

        WebSettings webSettings = webView.getSettings();
        webSettings.setBuiltInZoomControls(true);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setAllowContentAccess(true);
        webSettings.setUseWideViewPort(true);
        webView.loadUrl("http://192.168.1.236:8080/mobile/android.html");
}

and the android.html have ajax request. the android application works fine and load the android.html but without getting the ajax data

Answer 1

You can add AJAX handler into your web-view for handle any website with AJAX.

public class Main2Activity extends AppCompatActivity {

    private WebView webView;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        webView = (WebView) findViewById(R.id.webView);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        progressBar.setVisibility(View.GONE);
        webView.getSettings().setJavaScriptEnabled(true);
        initWebView();
        loadURL();
    }

    private void loadURL() {
        webView.loadUrl("www.google.com");
    }

    @SuppressLint("JavascriptInterface")
    private void initWebView() {
        webView.setWebChromeClient(new MyWebChromeClient(Main2Activity.this));
        webView.addJavascriptInterface(new AjaxHandler(Main2Activity.this), "ajaxHandler");
        webView.getSettings().setJavaScriptEnabled(true);

        webView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                progressBar.setVisibility(View.GONE);

            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                progressBar.setVisibility(View.VISIBLE);
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                progressBar.setVisibility(View.GONE);
            }
        });
    }

    public class AjaxHandler {

        private static final String TAG = "AjaxHandler";
        private final Context context;

        public AjaxHandler(Context context) {
            this.context = context;
        }

        public void ajaxBegin() {
            Log.e(TAG, "AJAX Begin");
            Toast.makeText(context, "AJAX Begin", Toast.LENGTH_SHORT).show();
        }

        public void ajaxDone() {
            Log.e(TAG, "AJAX Done");
            Toast.makeText(context, "AJAX Done", Toast.LENGTH_SHORT).show();
        }
    }

    private class MyWebChromeClient extends WebChromeClient {
        Context context;

        public MyWebChromeClient(Context context) {
            super();
            this.context = context;
        }
    }

}

Answer 2

Try this

WebView web=(WebView) findViewById(R.id.webView1);
web.getSettings().setJavaScriptEnabled(true);

Answer 3

Finally I've found the answer after 3 Long days.
the problem was in the page that I request which have this code:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in the response which conflict with android webview and doesn't work with jquery selectors ... Don't know why!!!

but when I removed the above code from response the page and its ajax works fine.

P.S: all my pages are xhtml not html.

Answer 4

1. Check if you have <uses-permission android:name="android.permission.INTERNET" /> in your AppManifest.xml file.
2. If javascript in the loaded page makes requests to some site other than http://192.168.1.236:8080 and that site does not allow Cross-Origin XMLHTTPRequests, then these requests will fail due to security restrictions of WebView.